<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">
    <!-- /css -->

<!--    <style>-->
<!--        body {-->
<!--            font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;-->
<!--            font-size: 16px;-->
<!--            line-height: 1.42857143;-->
<!--            color: #333;-->
<!--            background-color: #fff;-->
<!--        }-->

<!--        ul li {-->
<!--            line-height: 24px;-->
<!--        }-->

<!--        blockquote {-->
<!--            border-left: #eee solid 5px;-->
<!--            padding-left: 20px;-->
<!--        }-->

<!--        code {-->
<!--            color: #D34B62;-->
<!--            background: #F9F2F4;-->
<!--        }-->
<!--    </style>-->

    <title>增加文章</title>
</head>
<body>
<h1>这是增加文章的页面</h1>

<div class="container">

    <!-- 提交表单 -->
    <div class="col-6">
        <form th:action="@{#}" method="post">
            <div class="container">
                <label for="title" class="row">文章标题</label>
                <input id="title" name="a_title" placeholder="请输入文章标题" class="row">
            </div>

            <div class="container">
                <label for="content" class="row">文章内容</label>
                <div class="row">
                    <textarea id="content" class="col-7" name="a_content"  onkeyup="compile()"
                              placeholder="请输入文章内容"></textarea>
                    <div class="col-1"></div>
                    <div id="result" class="col-4">

                    </div>
                </div>
            </div>
            <br>
            <button type="submit">Submit</button>
        </form>
    </div>
    <!-- /提交表单 -->
</div>



<!-- JS -->
<script type="text/javascript" th:src="@{/js/showdown/showdown.min.js}"></script>
<script type="text/javascript" th:src="@{/js/showdown/showdown.js}"></script>
<script type="text/javascript">
    function compile() {
        let text = document.getElementById("content").value;
        let converter = new showdown.Converter();
        let html = converter.makeHtml(text);
        document.getElementById("result").innerHTML = html;
    }
</script>

<!-- /JS -->
</body>
</html>